<template>
  <div class="main">
    <h1 class="title">账户登录</h1>
    <a-form :wrapper-col="{ span: 24 }">
      <a-form-item label="" v-bind="validateInfos.username">
        <a-input v-model:value="modelRef.username" :placeholder="'用户名'" @keyup.enter="handleSubmit">
          <template #prefix><user-outlined /></template>
        </a-input>
      </a-form-item>
      <a-form-item label="" v-bind="validateInfos.password">
        <a-input-password v-model:value="modelRef.password" :placeholder="'密码'" @keyup.enter="handleSubmit">
          <template #prefix><unlock-outlined /></template>
        </a-input-password>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" class="submit" :loading="submitLoading" @click="handleSubmit">登录</a-button>
        <div class="text-align-right"></div>
      </a-form-item>

      <a-alert
        v-if="loginStatus === 'error' && !submitLoading"
        :message="'用户名或密码错误！'"
        type="error"
        :show-icon="true"
      />
    </a-form>
  </div>
</template>
<script lang="ts">
import { computed, ComputedRef, defineComponent, reactive, Ref, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { Props, validateInfos } from 'ant-design-vue/lib/form/useForm'
import { message, Form } from 'ant-design-vue'
const useForm = Form.useForm

import { UserOutlined, UnlockOutlined } from '@ant-design/icons-vue'
import { LoginParamsType } from '@/api/user'

interface UserLoginSetupData {
  resetFields: (newValues?: Props) => void
  validateInfos: any
  modelRef: LoginParamsType
  submitLoading: Ref<boolean>
  handleSubmit: (e: MouseEvent) => void
  loginStatus: ComputedRef<'error' | 'ok' | undefined>
}

export default defineComponent({
  name: 'UserLogin',
  components: {
    UserOutlined,
    UnlockOutlined,
  },
  setup(): UserLoginSetupData {
    const router = useRouter()
    const { currentRoute } = router
    const userStore = useUserStore()

    // 表单值
    const modelRef = reactive<LoginParamsType>({
      username: '',
      password: '',
    })
    // 表单验证
    const rulesRef = reactive({
      username: [
        {
          required: true,
          message: '请输入用户名',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
        },
      ],
    })
    // 获取表单内容
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)
    // 登录loading
    const submitLoading = ref<boolean>(false)
    // 登录
    const handleSubmit = async (e: MouseEvent) => {
      e.preventDefault()
      submitLoading.value = true
      try {
        const fieldsValue = await validate<LoginParamsType>()
        // const res: boolean = await store.dispatch('userlogin/login',fieldsValue);
        const res: boolean | undefined = await userStore.login({
          ...fieldsValue,
        })
        if (res === true) {
          message.success('登录成功')
          const { redirect, ...query } = currentRoute.value.query
          router.replace({
            path: (redirect as string) || '/',
            query: {
              ...query,
            },
          })
        }
      } catch (error) {
        // console.log('error', error);
        message.warning('验证不通过，请检查输入')
      }
      submitLoading.value = false
    }

    // 登录状态
    const loginStatus = computed<'ok' | 'error' | undefined>(() => userStore.loginStatus)

    return {
      resetFields,
      validateInfos,
      modelRef,
      submitLoading,
      handleSubmit,
      loginStatus,
    }
  },
})
</script>
<style lang="less" scoped>
.main {
  flex: none;
  width: 320px;
  margin: 0 auto;
  padding: 36px;
  background-color: rgb(255 255 255 / 20%);
  border-radius: 4px;
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);

  .title {
    margin-top: 0;
    margin-bottom: 30px;
    // color: #ffffff;
    color: rgb(0 0 0 / 85%);
    font-size: 28px;
    text-align: center;

    /* background-image:-webkit-linear-gradient(right,#FFFFFF,#009688, #FFFFFF);
        -webkit-background-clip: text;
        -webkit-text-fill-color:transparent; */
  }

  .submit {
    width: 100%;
  }
}
</style>
